<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="../js/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="../js/index.js"></script>
    <title>绘梦之约</title>
</head>
<style>

</style>

<body>
<div id="top-bar">
    <div id="welcome">
        <div><img id="img_hui" src="../images/welcome_title.png" alt=""></div>
        <div><img id="img_meng" src="../images/welcome_title.png" alt=""></div>
        <div><img id="logo" src="../images/wow_logo.png" alt=""></div>
        <div><img id="img_zhi" src="../images/welcome_title.png" alt=""></div>
        <div><img id="img_yue" src="../images/welcome_title.png" alt=""></div>
    </div>
</div>
<!-- //  /********************** 表格 ****************************/ -->
<div id="mid">
    <div class="container mycontent text-left">
        <!--透明层 -->
        <div class="regDiv">
            <h4>新用户注册</h4>
            <hr/>
            <!--表单开始-->
            <form class="form-horizontal" role="form" id="form-reg">
                <!--用户名-->
                <div class="form-group">
                    <div class="col-md-8">
                        <input type="text" class="form-control input_class" placeholder="请输入用户名"
                               name="username" id="username">
                    </div>
                    <label class="col-md-3 control-label err" id="usernameERR"
                           style="text-align: left"></label>
                </div>
                <!--密码-->
                <div class="form-group">
                    <div class="col-md-8">
                        <input type="password" class="form-control input_class" placeholder="请输入密码"
                               name="password" id="password">
                    </div>
                    <label class="col-md-3 control-label err" id="passwordERR" style="text-align: left">
                    </label>
                </div>
                <!--确认密码-->
                <div class="form-group">
                    <div class="col-md-8">
                        <input type="password" class="form-control input_class" placeholder="请再次输入密码"
                               id="password_Guarantee">
                    </div>
                    <label class="col-md-3 control-label err" id="password_GuaranteeERR"
                           style="text-align: left"> </label>
                </div>
                <div class="form-group" style="position: relative;">
                    <div class="col-md-8">
                        <input type="text" class="form-control " placeholder="请输入邮箱" id="email"
                               name="email">
                    </div>
                    <label class="col-md-3 control-label " id="emailERR" style="text-align: left"></label>
                    <label class="col-md-3 control-label " id="sendCallBackInfo"
                           style="text-align: left; position:absolute;"></label>
                </div>
                <div class="form-group">
                    <div class="col-md-8">
                        <input type="text" class="form-control input_class" placeholder="请输入收到的验证码"
                               name="verifiedcode" id="verifiedcode">
                    </div>
                    <div id="info"><a href="javascript:getcode()" id="sendcode">发送验证码</a></div>
                </div>
                <!--提交按钮-->
                <div class="form-group">
                    <label class="col-md-3 control-label"></label>
                    <div class="col-md-8">
                        <input class="btn btn-primary" type="button" value="立即注册" id="submit"/>
                        <span class="pull-right"><small>已经有账号？</small><a
                                href="login.html">登录</a></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- *********************************************表格***************************************** -->
<script>
    function getcode() {
        var email1 = $("#email").val();
        var reg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");
        if (email1 == null || email1 == "") {
            alert("请输入邮箱");
            return false;
        } else if (!reg.test(email1)) {
            alert("邮箱格式不对，请从新输入")
            return false;
        }
        var time = 120;
        var timer = setInterval(function () {
            $("#info").html("<h6>" + time + "秒后可再次发送</h6>")
            time--;
            if (time <= 0) {
                clearInterval(timer);
                $("#sendCallBackInfo").text("");
                $("#info").html("<a href='javascript:getcode()' id='sendcode'>发送验证码</a>")
            }
        }, 1000)
        $.ajax({
            type: "POST",
            url: "/blog/public/getmailcode",
            data: {
                "email": email1
            },
            dataType: "JSON",
            success: function (response) {
                if (response.state == 200) {
                    $("#sendCallBackInfo").text("邮件发送成功,请查收!")
                } else {
                    $("#sendCallBackInfo").text("失败")
                }
            }
        });
    }
</script>
<div id="bottle"></div>

</body>

</html>